<template>
  <div>
    <el-dialog
      title="添加群"
      :visible.sync="$store.state.dialog.addGroupDialog_b"
      :close-on-click-modal="false"
      @open="openDialog_fn"
    >
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-search"></i>查找群</span>
          <el-input
            class="find-input"
            type="number"
            placeholder="请输入群号"
            v-model="findGroupNum_i"
            prefix-icon="el-icon-edit"
          ></el-input>
          <el-button
            @click="findGroupNum_fn"
            class="find-btn"
            icon="el-icon-search"
            >查找</el-button
          >
          <div class="find-bottom">
            <el-card class="box-card">
              <div>{{ findGroupResult_s }}</div>
              <el-button @click="addGroup_fn" v-show="isFindGroup_b"
                >添加该群</el-button
              >
            </el-card>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-magic-stick"></i>创建群</span>
          <el-tag class="group-num">{{ createGroupNum_i }}</el-tag>
          <el-button @click="createGroupNum_fn">换一个</el-button>
          <el-input
            class="createGroupInput"
            clearable
            v-model="createGroupName_s"
            placeholder="请输入群名称"
          ></el-input>
          <el-button icon="el-icon-magic-stick" @click="createGroupNumHandle_fn"
            >创建</el-button
          >
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { getAllGroups_fn } from "../../../api/Index/group";
import socket_m from "../../../util/connect";
export default {
  data() {
    return {
      findGroupNum_i: null,
      findGroupNum1_i: null,
      createGroupNum_i: null,
      createGroupName_s: "",
      findGroupResult_s: "", // 查找群结果描述
      isFindGroup_b: false,
    };
  },
  methods: {
    // 打开对话框
    openDialog_fn() {
      this.createGroupNum_fn();
      this.createGroupName_s = "";
    },
    // 查找某个群
    async findGroupNum_fn() {
      if (!this.findGroupNum_i) {
        return this.$message.info("请输入群号");
      }
      socket_m.sendMsg("findGroup", { num: this.findGroupNum_i }, (o) => {
        if (o.code === 0) {
          this.findGroupResult_s = "群号：" + this.findGroupNum_i + "已找到";
          this.isFindGroup_b = true;
          this.findGroupNum1_i = this.findGroupNum_i;
        } else {
          this.findGroupResult_s = "群号：" + this.findGroupNum_i + "未找到";
          this.isFindGroup_b = false;
        }
        this.findGroupNum_i = "";
      });
    },
    // 添加该群
    async addGroup_fn() {
      socket_m.sendMsg("addGroup", { num: this.findGroupNum1_i }, async (o) => {
        if (o.code === 0) {
          await getAllGroups_fn();
          this.$store.commit("dialog/setAddGroupDialog_fn", false);
        }
      });
    },
    // 生成随机群号
    createGroupNum_fn() {
      this.createGroupNum_i = Math.floor(Math.random() * 100000000);
    },
    // 发起创建群请求
    async createGroupNumHandle_fn() {
      if (!this.createGroupName_s.trim()) {
        return this.$message.error("请输入群名称");
      }

      socket_m.sendMsg(
        "createGroup",
        { num: this.createGroupNum_i, name: this.createGroupName_s },
        async (o) => {
          console.log(o);
          if (o.code === 0) {
            let groupList = await getAllGroups_fn();
            console.log(groupList);
            this.$store.commit("updateGroups_fn", groupList);
            this.$store.commit("dialog/setAddGroupDialog_fn", false);
          }
        }
      );
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
  width: 570px;
}
.el-input.find-input {
  width: calc(100% - 110px);
}
.el-button.find-btn {
  margin-left: 15px;
}
.group-num {
  margin-right: 15px;
}
.box-card {
  margin-top: 15px;
}
/deep/ .el-card__body {
  display: flex;
  justify-content: space-between;
}
.createGroupInput {
  width: 200px;
  margin: 0 15px;
}
</style>